<div class="public">
	<div class="container">
		<img
			src="../../img/loading-dots.gif"
			alt="Loading"
			class="br-loader"
			ng-class="{'loading': $ctrl.loading}"
		/>
		<section class="login-page">
			<header class="public-logo">
				<h1>BRMW</h1>
			</header>
			<div class="alert alert-danger" role="alert" data-ng-class="{'hide': !$ctrl.feedback.showing}">
				<p>{{ $ctrl.feedback.message }}</p>
			</div>
			<form class="login-form" name="loginForm" ng-submit="$ctrl.submitForm(loginForm.$valid)" novalidate>
				<div class="form-group">
					<label for="exampleInputEmail1">{{ 'Email' | translate }}</label>
					<input
						type="email"
						name="email"
						class="form-control input-lg"
						id="userEmail"
						placeholder="{{ 'Email' | translate }}"
						autocomplete="off"
						required
						ng-model="$ctrl.credentials.username"
						data-ng-class="{'error': loginForm.email.$invalid && (!loginForm.email.$pristine || $ctrl.submitted)}"
					/>
				</div>
				<div class="form-group">
					<label for="exampleInputPassword1">{{ 'Password' | translate }}</label>
					<input
						type="password"
						name="password"
						class="form-control input-lg"
						id="userPassword"
						placeholder="{{ 'Password' | translate }}"
						autocomplete="off"
						required
						ng-model="$ctrl.credentials.password"
						data-ng-class="{'error': loginForm.password.$invalid && (!loginForm.password.$pristine || $ctrl.submitted)}"
					/>
				</div>
				<react-button type="'submit'" label="'Login' | translate"></react-button>
			</form>
			<aside class="account-options">
				<div class="recovery-password">
					<a href="#" data-ui-sref="recovery">{{ 'Recovery password' | translate }}</a>
				</div>
				<hr class="separator"/>
				<a class="register br-button btn-block btn-alt" href="#" data-ui-sref="register">{{ 'Create account' | translate }}</a>
			<aside>
		</section>

		<footer class="language-selector">
			<h2>
				<i class="fa fa-globe" aria-hidden="true"></i>
				{{'Language' | translate}}</h2>
			<ul class="language-list">
				<li><a href="#" ng-click="$ctrl.changeLanguage('pt_BR')" data-cy="lang-pt-br">{{ 'Portuguese (Brazil)' | translate }}</a></li>
				<li><a href="#" ng-click="$ctrl.changeLanguage('en')" data-cy="lang-en-us">{{ 'English' | translate }}</a></li>
			</ul>
		</footer>
	</div>
</div>